import React, { Component } from 'react';
import { Card, message, Button } from 'antd';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';

@connect(({ loading, messagesDetail: { data } }) => ({
  loading: loading.effects['messagesDetail/fetchMessageInfo'],
  data,
}))
class MessagesDetail extends Component {

  componentDidMount() {
    const {
      location: {
        query: { id },
      },
      dispatch,
    } = this.props;
    if (id) {
      dispatch({
        type: 'messagesDetail/fetchMessageInfo',
        payload: {
          id,
        },
      }).catch(errMsg => {
        message.error(errMsg);
      });
    }
  }

  render() {
    const { loading, data } = this.props;
    return (
      <PageHeaderWrapper
        title="消息详情"
      >
        <Card
          bordered={false}
          loading={loading}
          bodyStyle={{ padding:0 }}
        >
          <div>
            <h3>{data.subject}</h3>
            <p style={{ color: '#999' }}>{data.createTime && moment(JSON.parse(data.createTime)).format('YYYY-MM-DD')}</p>
            <p style={{ marginTop: '20px' }} dangerouslySetInnerHTML={{ __html: data.content }}></p>

            {
              data && data.url && <Button href={data.url} type="primary">去办理</Button>
            }
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default MessagesDetail;
